<!DOCTYPE html>
<html lang="en">
  <head>
    <title>midime</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.9.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=optional" rel="stylesheet">
    <link rel="icon" href="https://magenta.tensorflow.org/favicon.ico">
  </head>
  <body>
    <div class="full green" id="splashScreen">
      <div class="content small">
        <section>
          <h1>midi<b>me</b></h1>
        </section>

        <section>

          <div class="horizontal">
            <button id="btnGoMelodies" class="button">🎹 melodies</button>
            <button id="btnGoTrios" class="button">🎹🎸🥁 trios</button>
          </div>
        </section>


      </div>
    </div>

    <div class="full" id="mainScreen" hidden>
      <div class="content">
        <h1><span id="modeText">midi</span><b>me</b></h1>




        <section id="section_2" hidden>
          <div class="index">2</div>
          <h2>Choose your sound</h2>

          <p>
            We are now going to <b>train a small model</b> (right here in your browser!!!), based on MusicVAE, that will try to make sure all the
            sampled variations will sound like some music you give it. You can
            <label class="button" id="fileBtn">
              load a midi file
              <input type="file" id="fileInput" multiple>
            </label>
            <b>or</b>
            <button id="sampleBtn" class="button">
              load our example
            </button>
            if you don't have a MIDI available.

          </p>
          <b><p id="status" hidden></p></b>

          <div id="input" hidden>
            <p>This is what your file sounds like:</p>
            <div class="relative">
              <button id="btnPlayInput" class="button-circle" aria-label="play">
                <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
              </button>
              <div class="visualizer-container cream">
                <svg id="vizInput"></svg>
              </div>
            </div>
          </div>
        </section>

        <section id="section_3" hidden>
          <div class="index">3</div>
          <h2>Personalize the model!</h2>

          <div id="hasMelody" hidden>
            <p>The MIDI file you uploaded had several instruments, so this is what we think the melody is. This is what we will be training on.</p>
            <div class="relative">
              <button id="btnPlayMelody" class="button-circle" aria-label="play">
                <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
              </button>
              <div class="visualizer-container cream">
                <svg id="vizMelody"></svg>
              </div>
            </div>
          </div>

          <p id="beforeTraining">We're ready to start training on the MIDI that you uploaded!  <br>
            When you're ready, <button class="button" id="btnTrain">start training!!</button> for <input id="trainingSteps" value="100" type="tel"> steps.
          </p>

          <div id="duringTraining" hidden>
            <p>Training step: <b id="trainingStep">0</b> / <span id="totalSteps">100</span></p>
            <p>To check how well we're training the model, we can track its error reconstructing your
              uploaded file. We're not looking for it to become exactly 0 -- just to go down and flatten out. </p>
            <svg id="errorGraph" width="300"></svg>
          </div>
        </section>
        <section id="section_1">
          <div class="index" id="two">1</div>
          <h2>Hear some samples!</h2>

          <p>music_vae is a machine learning model that has previously been trained
            on a lot of MIDI files. It
            represents each music sample as a vector
            of 256 features, and every different vector of 256 numbers sounds like a different piece of music.  </p>



          <b><p id="loadingStatus">Loading model...</p></b>

          <p>
            You can also <button class="button" id="btnSample" disabled>get another sample</button>
            whenever you want.
          </p>

          <div id="afterLoading" hidden>


            <p>genrate:</p>
            <div class="relative">
              <div class="visualizer-container cream">
                <button id="btnPlaySample" class="button-circle" aria-label="play">
                  <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                  <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
                </button>
                <svg id="vizSample"></svg>
              </div>
            </div>
            <br>
            <button id="saveBtn" class="button">save this sample</button>
            <br>

          </div>
        </section>


      </div>
    </div>
  </body>
  <script src="helpers.js"></script>
  <script src="script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js" defer></script>
</html>
